{% extends 'common_tpl.html' %}
{% load static %}
{% block title %}用户登录{% endblock %}
{% block css %}
    <link rel="stylesheet" href="{% static 'css/account_info.css' %}">
    <style>
        .error-msg {
            color: red;
            position: absolute;
        }
    </style>
{% endblock %}
{% block content %}
    <div class="container">
        <div class="account_info" style="width: 400px">
            <h1 class="title">登录</h1>
            <form id="login-form">
                {#                会自动在表单中创建name为csrfmiddlewaretoken的隐藏输入框用于校验csrftoken#}
                {% csrf_token %}
                {% for field in form %}
                    <div class="form-group">
                        <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                        {% if field.name == 'code' %}
                            <div class="clearfix">
                                <div class="col-md-6" style="padding-left: 0">{{ field }}
                                    <span class="error-msg"></span>
                                </div>
                                <img src="{% url 'main:login_code' %}" title="点击更换图片" id="imageCode">
                            </div>
                        {% else %}
                            {{ field }}
                            <span class="error-msg"></span>
                        {% endif %}
                    </div>
                {% endfor %}
                <div class="clearfix">
                    <button id="login-btn" type="button" class="btn btn-primary">登录</button>
                    <button id="login-register-btn" type="button" class="btn btn-primary" style="float: right">账号注册
                    </button>
                </div>
                <SPAN id="non_field_errors" class="error-msg"></SPAN>
            </form>
        </div>
    </div>
{% endblock %}
{% block js %}
    <script>
        {#表示在页面框架加载完成就能生效，一般jquery代码写在这里#}
        $(function () {
            {#函数的调用#}
            bindClickLoginBtn()
            bindClickRegister()
            bindImageCode()
        });

        {#绑定函数的定义#}

        function bindClickLoginBtn() {
            $('#login-btn').click(function () {
                $('.error-msg').empty();
                {#收集已经输入的表单数据#}
                let form_data = $("#login-form").serialize() // 会自动携带csrftoken，并手机表单中的所有input框数据
                $.ajax({
                    url: "{% url 'main:api_login' %}",
                    type: "post",
                    data: form_data,
                    dataType: "JSON",
                    success: function (res) {
                        if (res.ret === 0) {
                            {% if pre_page %}
                                location.href = "{{ pre_page|safe }}"
                            {% else %}
                                location.href = "{% url 'main:index' %}";
                            {% endif %}

                        } else { //循环此字典每次循环执行函数
                            $.each(res.errors, function (name, data) {
                                $('#id_' + name).next().text(data[0])
                                if (name === 'non_field_errors') {
                                    $('#non_field_errors').text(data[0])
                                }
                            })
                        }
                    }
                })
            })
        }

        function bindClickRegister() {
            $("#login-register-btn").click(function () {
                    location.href = "{% url 'main:register' %}";
                }
            )
        }

        function bindImageCode() {
            $('#imageCode').click(function () {
                let src = $(this).attr('src');
                $(this).attr('src', src + "?");
            })

        }
    </script>
{% endblock %}